<template>
  <q-dialog v-model="show" persistent>
    <q-card style="min-width: 350px; padding: 20px 10px">
      <q-card-section>
        <div class="text-h6">添加歌单</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-form
            @submit="createPlaylist() "
            class="q-gutter-md"
        >
          <q-card-section>
            <q-input
                dense
                v-model="playlist.name"
                label="歌曲名"
                autofocus
                :rules="[ val => val && val.length > 0 || '请输入歌单名!']"
                @keyup.enter="show = false"
            />



            <q-input
                outlined
                v-model="playlist.description"
                label="简介"
                autofocus
                :rules="[ val => val && val.length > 0 || '请输入简介!']"
                @keyup.enter="show = false"
            />
          </q-card-section>


          <q-card-section>
            <uploader lable="上传歌单封面" v-model:file="playlist.cover"/>
          </q-card-section>

          <q-card-actions align="right" class="text-primary">
            <q-btn label="确认" type="submit" color="primary"/>
            <q-btn flat label="取消" v-close-popup />
          </q-card-actions>
        </q-form>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import Uploader from '../../components/Uploader.vue'
import {reactive,ref} from 'vue'
import PromptInfo from "../../utils/notification.js";
import playlistApi from '../../api/playlist.js'


const props=defineProps({
  data:{
    type:Object,
    default(){
      return null;
    }
  }
})

const show=ref(true)

const file=ref(null)

const isEdit=ref(Boolean(props.data))

const playlist=reactive(props.data||{name:'',description:'',cover:null})

const emmit=defineEmits(['create-success']);
const createPlaylist=()=>{
playlistApi.create({
  name:playlist.name,
  description:playlist.description,
  coverId:playlist.cover.id
}).then(created=>{
  show.value=false
  PromptInfo.success(`歌单《${crested.name}》创建成功`)
  emmit('create-success')
}).catch(error=>{
  PromptInfo.error(error.message)
})
}


</script>

<style scoped>

</style>